<template>
  <div class="bf-commont-template">
    <!-- 工资社保 -->
    <!-- <el-card class="box-card"> -->
      <div slot="header" class="clearfix">
        <!-- <span>工资卡信息</span> -->
        <div class="clearfix card-slot">
          <div class="float-l">
            <span class="bar-l"></span><span>工资卡信息</span>
          </div>
          <div class="float-r">
            <!-- <el-button class="car-action" type="text" @click="editSalaryCarStatus = !editSalaryCarStatus">编辑</el-button> -->
          </div>
        </div>
      </div>
      <div :class="editSalaryCarStatus?'input-border-b':'input-border-none'" class="relative">
        <!-- <div :class="editSalaryCarStatus?'':'mask'"></div> -->
          <div v-if="!editSalaryCarStatus" class="roster-inner-detail">
            <div class="clearfix relative">
              <div v-for="item in slaryCardSetting" :key="item.field" class="clearfix">
                <div class="lable"><span>{{item.title}}</span></div>
                <div class="value"><span>{{form[item.field]}}</span></div>
              </div>
              <div class="one-action">
                <div @click="editSalaryCarStatus = !editSalaryCarStatus" class="color"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
              </div>
            </div>
          </div>

          <div v-if="editSalaryCarStatus" class="int-content clearfix rp-content input-border-b inner">
            <el-form
              ref="form"
              :model="form"
              :rules="editRules"
              label-width="137px"
              :label-position="'right'"
              class="clearfix">
              <div
                v-for="item in slaryCardSetting"
                :key="item.field"
                v-if="!item.hideEdit"
                class="bf-table-form-item padding-l padding-r">
                <component
                  v-if="!item.slot"
                  v-bind:is="'bf-form-'+item.type"
                  :form="form"
                  :item="item"
                  :disabled="item.disableEdit"
                  :rules="editRules">
                </component>
              </div>
            </el-form>

            <div class="w-100" :hidden="!editSalaryCarStatus">
              <div class="w-12"></div>
              <div>
                <el-button type="primary" @click="saveSalaryCard(form)">保存</el-button>
                <el-button  @click="editSalaryCarStatus=false">取消</el-button>
              </div>
            </div>

          </div>
      </div>
    <!-- </el-card> -->
    <div class="gap"></div>

    <!-- <el-card class="box-card"> -->
      <div slot="header" class="clearfix">
        <div class="clearfix card-slot">
          <div class="float-l">
            <span class="bar-l"></span><span>社保卡信息</span>
          </div>
          <div class="float-r">
            <!-- <el-button class="car-action" type="text" @click="editSocialCarStatus = !editSocialCarStatus">编辑</el-button> -->
          </div>
        </div>
      </div>
      <div :class="editSocialCarStatus?'input-border-b':'input-border-none'" class="relative">
        <!-- <div :class="editSocialCarStatus?'':'mask'"></div> -->

          <div v-if="!editSocialCarStatus" class="roster-inner-detail">
            <div class="clearfix relative">
              <div v-for="item in socialCarSetting" :key="item.field" class="clearfix">
                <div class="lable"><span>{{item.title}}</span></div>
                <div class="value"><span>{{form[item.field]}}</span></div>
              </div>
              <div class="one-action">
                <div @click="editSocialCarStatus = !editSocialCarStatus" class="color"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
              </div>
            </div>
          </div>

          <div v-if="editSocialCarStatus" class="int-content clearfix rp-content inner">
            <el-form
              ref="form"
              :model="form"
              :rules="editRules"
              label-width="137px"
              :label-position="'right'"
              class="clearfix">
              <div
                v-for="item in socialCarSetting"
                :key="item.field"
                v-if="!item.hideEdit"
                class="bf-table-form-item padding-l padding-r">
                <component
                  v-if="!item.slot"
                  v-bind:is="'bf-form-'+item.type"
                  :form="form"
                  :item="item"
                  :disabled="item.disableEdit"
                  :rules="editRules">
                </component>
              </div>
            </el-form>

            <div class="w-100" :hidden="!editSocialCarStatus">
              <div class="w-12"></div>
              <div>
                <el-button type="primary" @click="saveSafaCard(form)">保存</el-button>
                <el-button  @click="editSocialCarStatus=false">取消</el-button>
              </div>
            </div>
          </div>
      </div>
    <!-- </el-card> -->
    <div class="gap"></div>

    <!-- <el-card class="box-card"> -->
      <div slot="header" class="clearfix">
        <!-- <span>公积金</span> -->
        <div class="clearfix card-slot">
          <div class="float-l">
            <span class="bar-l"></span><span>公积金卡信息</span>
          </div>
          <div class="float-r">
            <!-- <el-button class="car-action" type="text" @click="editFundCarStatus = !editFundCarStatus">编辑</el-button> -->
          </div>
        </div>
      </div>
      <div :class="editFundCarStatus?'input-border-b':'input-border-none'" class="relative">
        <!-- <div :class="editFundCarStatus?'':'mask'"></div> -->

          <div v-if="!editFundCarStatus" class="roster-inner-detail">
            <div class="clearfix relative">
              <div v-for="item in fundCarSetting" :key="item.field" class="clearfix">
                <div class="lable"><span>{{item.title}}</span></div>
                <div class="value"><span>{{form[item.field]}}</span></div>
              </div>
              <div class="one-action">
                <div @click="editFundCarStatus = !editFundCarStatus" class="color"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
              </div>
            </div>
          </div>
          <div v-if="editFundCarStatus" class="int-content clearfix rp-content inner">
            <el-form
              ref="form"
              :model="form"
              :rules="editRules"
              label-width="137px"
              :label-position="'right'"
              class="clearfix">
              <div
                v-for="item in fundCarSetting"
                :key="item.field"
                v-if="!item.hideEdit"
                class="bf-table-form-item padding-l padding-r">
                <component
                  v-if="!item.slot"
                  v-bind:is="'bf-form-'+item.type"
                  :form="form"
                  :item="item"
                  :disabled="item.disableEdit"
                  :rules="editRules">
                </component>
              </div>
            </el-form>

            <div class="w-100" :hidden="!editFundCarStatus">
              <div class="w-12"></div>
              <div>
                <el-button type="primary" @click="savaFundCard(form)">保存</el-button>
                <el-button  @click="editFundCarStatus=false">取消</el-button>
              </div>
            </div>
          </div>
      </div>
    <!-- </el-card> -->
    <div class="gap"></div>

    <!-- <el-card class="box-card"> -->
      <div slot="header" class="clearfix">
        <span class="bar-l"></span><span>工资信息</span>
        <el-switch
          v-model="value2"
          @change="changeShowSalary"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </div>
      <div class="padding-t" v-if="value2">
        <bf-table
        :data="salaryData"
        :setting="salarySetting"
        @pageChange = "pageChange"
        :hiddenPagination = "true"
        ref="table"
        ></bf-table>
      </div>
    <!-- </el-card> -->
    <div class="gap"></div>

  </div>
</template>

<script>
import { getSalaryInofApi, getSalaryApi, saveSalaryCardApi, saveSocialSecurityApi, saveFundCardApi } from '../api'
import { slaryCardSetting, socialCarSetting, fundCarSetting } from './form'
export default {
  props: ['employeeData'],
  data() {
    return {
      value2: false,
      form: {},
      editRules: {},
      socialCarSetting: socialCarSetting,
      slaryCardSetting: slaryCardSetting,
      fundCarSetting: fundCarSetting,
      salaryData: {},
      employeeNo: '18081610',
      editSalaryCarStatus: false, // 工资卡信息
      editSocialCarStatus: false, // 社保卡
      editFundCarStatus: false,
      salarySetting: [
        {
          field: 'effectDate',
          title: '生效日期',
          type: 'text'
        },
        {
          field: 'targetSalary',
          title: '薪资',
          type: 'text'
        },
        {
          field: 'targetBaseSalary',
          title: '基本底薪',
          type: 'text'
        },
        {
          field: 'targetPostSalary',
          title: '岗位级别工资',
          type: 'text'
        },
        {
          field: 'targetAllowance',
          title: '岗位津贴',
          type: 'text'
        },
        {
          field: 'targetAchievementBonus',
          title: '岗位绩效奖金',
          type: 'text'
        },
        {
          field: 'targetFullattendReward',
          title: '全勤奖',
          type: 'text'
        },
        {
          field: 'targetOtherReward',
          title: '其他',
          type: 'text'
        },
        {
          field: 'turnoverType',
          title: '异动类型',
          type: 'selected',
          options: [
            {
              name: '入职',
              value: '1'
            },
            {
              name: '转正',
              value: '2'
            },
            {
              name: '晋升',
              value: '3'
            },
            {
              name: '降级',
              value: '4'
            },
            {
              name: '调岗',
              value: '5'
            },
            {
              name: '年度调薪',
              value: '6'
            },
            {
              name: '重新入职',
              value: '7'
            }
          ]
        },
        {
          field: 'status',
          title: '状态',
          type: 'selected',
          options: [
            {
              name: '待提交',
              value: '0'
            },
            {
              name: '审批中',
              value: '1'
            },
            {
              name: '审批通过',
              value: '2'
            },
            {
              name: '已放弃',
              value: '9'
            }
          ]
        }
      ]
    }
  },
  mounted: function() {
    this.employeeNo = this.employeeData.employeeNo
    // 获取工资社保信息
    this.getSalaryInof()

  },
  methods: {
    changeShowSalary() {
      // console.log(this.value2)
      if (this.value2) {
        // 查询工资信息
        this.getSalary()
      }
    },
    savaFundCard(form) {
      const params = {
        providentFundAccount: form.providentFundAccount,
        pfPaymentMonth: form.pfPaymentMonth,
        pfContributionBase: form.pfContributionBase,
        pfOtherInstructions: form.pfOtherInstructions,
        employeeNo: this.employeeNo
      }
      saveFundCardApi(params).then(response => {
        if (response.success) {
          this.$message({
            message: '修改公积金卡信息成功',
            type: 'success'
          })
          this.editFundCarStatus = false
          this.getSalaryInof()
        }
      })
    },
    saveSafaCard(form) {
      const params = {
        socialSecurityCard: form.socialSecurityCard,
        ssPaymentManth: form.ssPaymentManth,
        ssContributionBase: form.ssContributionBase,
        medicalInsuranceLevel: form.medicalInsuranceLevel,
        ginsengInsurance: form.ginsengInsurance,
        ssOtherInstructions: form.ssOtherInstructions,
        employeeNo: this.employeeNo
      }
      saveSocialSecurityApi(params).then(response => {
        if (response.success) {
          this.$message({
            message: '修改社保卡信息成功',
            type: 'success'
          })
          this.editSocialCarStatus = false
          this.getSalaryInof()
        }
      })
    },
    saveSalaryCard(form) {
      // 修改工资卡信息
      const params = {
        employeeNo: this.employeeNo,
        payCardNo: form.payCardNo,
        payCardBank: form.payCardBank
      }
      saveSalaryCardApi(params).then(response => {
        if (response.success) {
          this.$message({
            message: '修改工资卡信息成功',
            type: 'success'
          })
          this.editSalaryCarStatus = false
          this.getSalaryInof()
        }
      })
    },
    getSalary() {
      getSalaryApi(this.employeeNo).then(response => {
        this.salaryData = response
        // console.log(response)
      })
    },
    getSalaryInof() {
      getSalaryInofApi(this.employeeNo).then(response => {
        if (!response.data) {
          response.data = {}
        }
        this.form = response.data
      })
    },
    pageChange() {

    }
  }
}
</script>

<style scoped>

@import './form.css';
</style>
